<template>
  <div class="report-list">
    <div class="rl-content white-card">
      <div class="search-box" ref="searchBar">
        <el-form
          :model="form"
          ref="form"
          size="medium"
          label-width="85px"
          class="demo-form"
        >
          <el-row>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="用户名称" prop="personName">
                <el-select
                  style="width: 100%"
                  v-model="personObj"
                  filterable
                  remote
                  clearable
                  value-key="personId"
                  :remote-method="getUserName"
                  placeholder="请输入用户名称进行搜索"
                  @change="handleSearch"
                  @clear="handleClearPersonName"
                >
                  <el-option
                    v-for="item in personNameOptions"
                    :key="item.personId"
                    :label="item.personName"
                    :value="item"
                  >
                    <span
                      >{{ item.personName }} (用户ID：{{ item.personId }})</span
                    >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="订单号" prop="orderNo">
                <el-input
                  style="width: 100%"
                  type="text"
                  v-model="form.orderNo"
                  placeholder="请输入完整的订单号"
                  @keyup.enter.native="handleSearch"
                  @clear="handleSearch"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="用户手机号" prop="telephone">
                <el-input
                  style="width: 100%"
                  type="text"
                  v-model="form.telephone"
                  placeholder="请输入完整的用户手机号"
                  @keyup.enter.native="handleSearch"
                  @clear="handleSearch"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="职途卡号" prop="cardNo">
                <el-input
                  style="width: 100%"
                  type="text"
                  v-model="form.cardNo"
                  placeholder="请输入完整的职途卡号"
                  @keyup.enter.native="handleSearch"
                  @clear="handleSearch"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="所属销售" prop="sellId">
                <el-select
                  style="width: 100%"
                  v-model="form.sellId"
                  filterable
                  remote
                  clearable
                  value-key="personId"
                  :remote-method="getSellName"
                  placeholder="请输入销售名称进行搜索"
                  @change="handleSearch"
                  @clear="handleClearSellName"
                >
                  <el-option
                    v-for="item in sellOptions"
                    :key="item.personId"
                    :label="item.iname"
                    :value="item.personId"
                  >
                    <span>{{ item.iname }} (销售ID：{{ item.personId }})</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="所属项目" prop="cardType">
                <el-select
                  style="width: 100%"
                  v-model="form.cardType"
                  placeholder="请选择项目名称"
                  filterable
                  clearable
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in cardTypeList"
                    :key="item.value"
                    :label="item.cardName"
                    :value="item.cardType"
                    @change="handleSearch"
                  >
                    <span>{{ item.cardName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="购买内容" prop="orderFuncName">
                <el-select
                  style="width: 100%"
                  v-model="form.orderFuncName"
                  placeholder="请选择购买内容"
                  filterable
                  clearable
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in rightList"
                    :key="item"
                    :label="item"
                    :value="item"
                    @change="handleSearch"
                  >
                    <span>{{ item }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="支付时间" prop="activeTime">
                <el-date-picker
                  style="width: 100%"
                  v-model="form.activeTime"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  type="daterange"
                  range-separator="-"
                  valueFormat="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="handleSearch"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="数据类型">
                <el-select
                  style="width: 100%"
                  v-model="form.dataType"
                  placeholder="请选择数据类型"
                  clearable
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in TestOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col
              :xs="12"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="6"
              v-has="'testOptions'"
            >
              <el-form-item label="数据类型">
                <el-select
                  style="width: 100%"
                  v-model="form.isTest"
                  placeholder="请选择数据类型"
                  clearable
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in isTestOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label-width="20px">
                <el-button type="primary" size="small" @click="handleSearch"
                  >筛选</el-button
                >
                <el-button @click="handleReset" size="small">重置</el-button>
                <el-button
                  plain
                  size="small"
                  v-has="'export'"
                  :loading="exportLoading"
                  @click="exportAll"
                  >{{ exportLoading ? "导出中..." : "一键导出" }}</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="white-card table-wrap">
        <div :style="{ height: tableHeight + 'px' }">
          <el-table
            :data="list"
            height="100%"
            v-loading="loading"
            @sort-change="handleSortChange"
            tooltip-effect="light"
            :header-cell-class-name="'header_name_style'"
          >
            <el-table-column
              prop="orderNo"
              label="订单号"
              min-width="190"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div class="no-wrap">
                  {{ scope.row.orderNo || "--" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="cardType"
              label="所属项目"
              min-width="130"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div
                  class="no-wrap"
                  :title="getProjectName(scope.row.cardType)"
                >
                  {{ getProjectName(scope.row.cardType) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="cardNo" label="职途卡号" min-width="100">
              <template slot-scope="scope">
                <div class="no-wrap">
                  {{ scope.row.cardNo || "--" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="personName"
              label="用户名称"
              min-width="100"
              show-overflow-tooltip
              style="color: red"
            >
              <template slot-scope="scope">
                <div class="no-wrap">
                  {{ scope.row.personName || "--" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="personId"
              label="用户ID"
              min-width="100"
              show-overflow-tooltip
              style="color: red"
            >
              <template slot-scope="scope">
                <div class="no-wrap">
                  {{ scope.row.personId || "--" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="telephone"
              label="用户手机号"
              min-width="120"
            >
              <template slot-scope="scope">
                <div class="no-wrap" :title="scope.row.encryptPhone">
                  {{ scope.row.encryptPhone || "--" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="rightProducts"
              label="购买内容"
              min-width="100"
            >
              <template
                slot-scope="scope"
                v-if="
                  Array.isArray(scope.row.rightProductList) &&
                  scope.row.rightProductList.length
                "
              >
                <el-popover
                  placement="top"
                  title=""
                  popper-class="el-popover-self"
                  trigger="hover"
                >
                  <div class="list-box">
                    <div
                      class="item"
                      v-for="(item, index) in scope.row.rightProductList"
                      :key="index"
                    >
                      <span class="name">{{ item }}</span>
                    </div>
                  </div>
                  <div slot="reference" class="currentName-3 no-wrap">
                    <span class="name pointer">
                      {{ scope.row.rightProductList[0] }}...</span
                    >
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="支付金额" min-width="100">
              <template slot-scope="scope">
                <div class="no-wrap blue">
                  {{ scope.row.price ? "¥ " + scope.row.price : "--" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="sellName" label="所属销售" min-width="80">
              <template slot-scope="scope">
                <div class="no-wrap">
                  {{ scope.row.sellName || "--" }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="price" label="提成" min-width="80">
                            <template slot-scope="scope">
                                <div class="no-wrap blue">
                                    {{
                                        scope.row.price
                                        ? "¥ " + (scope.row.price * 0.2).toFixed(2)
                                        : "--"
                                    }}
                                </div>
                            </template>
                        </el-table-column> -->
            <el-table-column
              prop="consultantName"
              label="所属咨询顾问"
              min-width="150"
            >
              <template slot-scope="scope">
                <div class="no-wrap change-consultant">
                  {{ scope.row.consultantName || "" }}
                  <span @click="changeConsultant(scope.row)">{{
                    scope.row.consultantName ? "换" : "添加"
                  }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="payTime" label="支付时间" min-width="170">
              <template slot-scope="scope">
                <div class="no-wrap">
                  {{ scope.row.payTime || "--" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="payTypeName"
              label="支付方式"
              min-width="100"
            >
              <template slot-scope="scope">
                <div class="no-wrap blue">
                  {{ scope.row.payTypeName || "--" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="orderStateName"
              label="订单状态"
              min-width="100"
            ></el-table-column>
            <el-table-column prop="" label="操作" min-width="120" fixed="right">
              <template slot-scope="scope">
                <div
                  :class="[
                    'no-wrap',
                    { 'grey-cursor': scope.row.rateStatus != 1 },
                    { 'blue-cursor': scope.row.rateStatus == 1 },
                  ]"
                  @click="estimateDetail(scope.row)"
                >
                  评价反馈
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="deliveryStatus" label="邮递状态" min-width="100">
                            <template slot-scope="scope">
                                {{ scope.row.deliveryStatus || "--" }}
                            </template>
                        </el-table-column> -->
          </el-table>
        </div>
        <div class="pager" v-if="list.length > 0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="page.pageSizes"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.sums"
            background
          ></el-pagination>
        </div>
      </div>
    </div>
    <ChangeConsultant
      v-if="changeConsultantVisible"
      :visible.sync="changeConsultantVisible"
      :selectedRow="selectedRow"
      @refresh="getData"
    ></ChangeConsultant>
    <FeedBackResult
      v-if="feedBackResultVisible"
      :visible.sync="feedBackResultVisible"
      :selectedRow="selectedRow"
    ></FeedBackResult>
  </div>
</template>

<script>
import {
  getOrderList,
  getPersonList,
  getYlEsPersonList,
  getProjectList,
  getProductList,
  applicationList,
  getOrderDetail,
} from "@/api/index";
import Axios from "axios";
import { apiJava } from "@/api/root";
import { downLoadFile } from "@/utils/downLoadFile";
import page from "@/mixin/page";
import ChangeConsultant from "./components/changeConsultant.vue";
import FeedBackResult from "./components/feedBackResult.vue";

export default {
  name: "orderManagement",
  components: { ChangeConsultant, FeedBackResult },
  mixins: [page],
  data() {
    return {
      feedBackResultVisible: false,
      changeConsultantVisible: false,
      loading: false,
      tableHeight: "auto",
      list: [],
      multipleSelection: [],
      form: {
        telephone: "",
        orderNo: "",
        personId: "",
        orderFuncName: "",
        activeTime: [],
        cardType: "",
        isTest: 0,
        dataType: 1,
        sellName: "",
        sellId: "",
      },
      personObj: null,
      taskStatusOptions: [
        { label: "全部", value: 2 },
        { label: "已激活", value: 0 },
        { label: "未激活", value: 1 },
      ],
      buyContentOptions: [
        { label: "全部", value: "0" },
        { label: "是", value: "1" },
      ],
      // 远程排序
      sortType: "",
      sortField: "",
      rightList: [],
      projectTypeList: [],
      exportLoading: false,
      currentPersonId: "",
      fileList: [],
      personNameOptions: [],
      sellOptions: [],
      projectList: [],
      applyList: [],
      cardTypeList: [],
      selectedRow: {},
      isTestOptions: [
        { label: "正式数据", value: 0 },
        { label: "测试数据", value: 1 },
        { label: "全部", value: 2 },
      ],
      TestOptions: [
        { label: "正式数据", value: 1 },
        { label: "测试数据", value: 2 },
        { label: "全部", value: 0 },
      ],
    };
  },
  computed: {
    pickerOptions() {
      return {
        disabledDate(time) {
          const date1 = new Date("2023-09-01");
          const date2 = new Date(
            new Date().getFullYear() +
              "-" +
              ("0" + (new Date().getMonth() + 1)).substr(-2) +
              "-" +
              ("0" + new Date().getDate()).substr(-2)
          );
          const diff = date2 - date1 + 60 * 60 * 24 * 1000;
          return (
            time.getTime() < Date.now() - diff || Date.now() < time.getTime()
          );
        },
      };
    },
  },
  async created() {
    window.addEventListener("resize", this.getHeight);
    this.applicationListFn();
    // this.getDefaultTime();
    await this.getProjectListFn();
    this.getData();
    this.getProductList();
  },
  mounted() {
    this.getHeight();
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
  methods: {
    estimateDetail(row) {
      if (row.rateStatus == 1) {
        this.selectedRow = row;
        this.feedBackResultVisible = true;
      } else {
        this.$message.warning("当前订单暂无评价不可查看");
      }
    },

    async changeConsultant(row) {
      this.selectedRow = row;
      this.changeConsultantVisible = true;
    },
    handleChangeCardType(val) {
      this.handleSearch();
    },
    applicationListFn() {
      applicationList().then((res) => {
        if (res.code == 200) {
          this.localAppList = res.data;
          let temp = [];
          res.data.forEach((item) => {
            if (Array.isArray(item.cardTypeList)) {
              temp = temp.concat(item.cardTypeList);
            }
          });
          this.cardTypeList = temp;
        }
      });
    },
    getHeight() {
      this.tableHeight =
        window.innerHeight - this.$refs.searchBar.offsetHeight - 150;
    },
    async getDefaultTime() {
      const startTime = this.getCurrentMonthFirst();
      const endTime = this.getCurrentMonthLast();
      this.form.activeTime = [startTime, endTime];
    },
    //设置默认日期
    getCurrentMonthFirst() {
      // // 获取一个月前的今天
      var date = new Date();
      var month = parseInt(date.getMonth());
      var day = date.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      return date.getFullYear() + "-" + month + "-" + day;
    },
    getCurrentMonthLast() {
      // 获取当天日期
      var date = new Date();
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) month = "0" + month;
      if (day < 10) day = "0" + day;
      return date.getFullYear() + "-" + month + "-" + day;
    },
    async getProductList() {
      const res = await getProductList();
      this.rightList = res.data;
    },
    getProjectName(cardType) {
      const temp = this.projectList.find((item) => item.cardType == cardType);
      if (temp) {
        return temp.cardName;
      } else {
        return "未知应用方";
      }
    },
    getUserName(personName) {
      if (personName) {
        let params = {
          personName,
        };
        getPersonList(params)
          .then((res) => {
            if (res.code == 200) {
              this.personNameOptions = res.data;
            } else {
              this.$message.error("获取用户列表失败");
            }
          })
          .catch(() => {
            this.$message.error("获取用户列表失败");
          })
          .finally(() => {});
      }
    },
    getSellName(sellName) {
      if (sellName) {
        let params = {
          iname: sellName,
          pageNo: 1,
          pageSize: 50,
          moduleType: "GUWEN_MODULE_TYPE",
        };
        getYlEsPersonList(params)
          .then((res) => {
            if (res.code == 200) {
              this.sellOptions = res.data;
            } else {
              this.$message.error("获取销售列表失败");
            }
          })
          .catch(() => {
            this.$message.error("获取销售列表失败");
          })
          .finally(() => {});
      }
    },
    async getProjectListFn() {
      getProjectList().then((res) => {
        if (res.code == 200) {
          this.projectList = res.data;
        }
      });
    },
    exportAll() {
      this.exportLoading = true;
      let params = {
        ...this.form,
        startTime:
          Array.isArray(this.form.activeTime) && this.form.activeTime.length > 1
            ? this.form.activeTime[0] + " 00:00:00"
            : "",
        endTime:
          Array.isArray(this.form.activeTime) && this.form.activeTime.length > 1
            ? this.form.activeTime[1] + " 23:59:59"
            : "",
        pageNo: 1,
        pageSize: 3000,
        isTest: 0,
        orderState: 2,
      };
      Axios({
        method: "post",
        url: apiJava + "/api-career/zt/order/export",
        data: params,
        responseType: "arraybuffer",
        headers: {},
        timeout: "60000",
      })
        .then((res) => {
          downLoadFile(res, "职途用户数据.xlsx");
        })
        .catch(() => {
          this.$message.error("导出失败");
        })
        .finally(() => {
          this.exportLoading = false;
        });
    },
    // 排序
    handleSortChange(val) {
      if (val && val.order == "ascending") this.sortType = "asc";
      else if (val && val.order == "descending") this.sortType = "desc";
      this.sortField = val.prop;
      this.page.currentPage = 1;
      this.getData();
    },
    getData() {
      this.loading = true;
      let params = {
        ...this.form,
        startTime:
          Array.isArray(this.form.activeTime) && this.form.activeTime.length > 1
            ? this.form.activeTime[0] + " 00:00:00"
            : "",
        endTime:
          Array.isArray(this.form.activeTime) && this.form.activeTime.length > 1
            ? this.form.activeTime[1] + " 23:59:59"
            : "",
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
        orderStateList: [2, 4],
      };
      getOrderList(params)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            this.list = res.data;
            this.page.sums = res.pageparam.sums;
          } else {
            this.loading = false;
            this.$message.error(res.status_desc);
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    async handleSearch() {
      if (this.form.telephone && this.form.telephone.length < 11) {
        this.$message.error("请输入完整的手机号再搜索");
        return;
      }
      this.$set(this.page, "currentPage", 1);
      this.form.personId = this.personObj?.personId;
      this.getData();
    },
    handleReset() {
      this.form.cardNo = "";
      this.form.orderNo = "";
      this.form.telephone = "";
      this.form.activeTime = [];
      this.form.personName = "";
      this.form.personId = "";
      this.personObj = null;
      this.form.sellId = "";
      this.form.cardType = "";
      this.form.orderFuncName = "";
      this.form.isTest = 0;
      this.form.dataType = 1;
      this.handleSearch();
    },
    handleClearPersonName() {
      this.form.personName = "";
      this.form.personId = "";
      this.personObj = null;
      this.getData();
    },
    handleClearSellName() {
      this.form.sellName = "";
      this.form.sellId = "";
      this.getData();
    },
  },
};
</script>
<style>
.el-popover.el-popper.el-popover-self {
  min-width: 20px !important;
}
</style>
<style lang="scss" scoped>
.white-card {
  /deep/ .header_name_style {
    font-size: 14px;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    color: #6c7481;
  }
}

.pointer {
  cursor: pointer;
}

.report-list {
  background: url("../../assets/images/bigBg.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;

  .rl-content {
    margin: 12px 12px 0 12px;

    .search-box {
      padding: 22px 24px 0 12px;
      border-bottom: 1px solid #e8e8e8;
    }

    .table-wrap {
      box-shadow: 0 0 0 0;
      padding: 12px;
      overflow: hidden;

      .operate-bar {
        display: flex;

        /deep/ .el-button--small.is-round {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #555555;
        }
      }

      .currentName-1 {
        color: #ba4bee;
      }

      .currentName-2 {
        color: #999999;
      }

      .currentName-3 {
        color: #666;

        .name {
          color: #6a4aff;
          padding-left: 4px;
          font-weight: 400;
        }
      }

      .currentName-4 {
        color: #0cb354;
      }
    }

    // .el-table {
    //   margin-top: 16px;
    // }

    .el-dropdown {
      margin-left: 16px;
    }
  }
}

.list-box {
  .item {
    display: flex;
    justify-content: space-between;
    color: #999;
    padding: 2px 0;

    .isActive {
      color: #1890ff;
    }

    .finish-type {
      margin-left: 5px;
    }

    .unfinishColor {
      color: #999999;
    }

    .doingColor {
      color: #6a4aff;
    }

    .finishColor {
      color: #000000;
    }
  }
}

.rightProductList {
  display: flex;
  flex-direction: column;

  .rightProductItem {
    margin-bottom: 12rpx;

    &:last-of-type {
      margin-bottom: 12rpx;
    }
  }
}

/deep/ .el-col-12 {
  width: 25%;
}

/deep/ .pager {
  margin-top: 12px;
}

/deep/ .el-table__body-wrapper {
  &::-webkit-scrollbar-thumb:vertical {
    background-color: #e9e9e9;
    -webkit-border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb:horizontal {
    background-color: #e9e9e9;
    -webkit-border-radius: 4px;
  }
}

/deep/ .el-range-editor--small .el-range-separator {
  line-height: 24px;
  font-size: 13px;
  width: 25px;
}

.no-wrap {
  // max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  // cursor: pointer;
}
.change-consultant {
  span {
    margin-left: 15px;
    cursor: pointer;
    color: #6a4aff;
  }
}
.rightProducts {
  line-height: 32px;
}

.blue {
  color: #957fff;
}
.blue-cursor {
  color: #957fff;
  cursor: pointer;
}
.grey-cursor {
  color: #e9e9e9;
  cursor: pointer;
}

.operation-button {
  /deep/ .el-button--text {
    font-weight: 400;
  }
}
</style>
